<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">
		<title></title>
		<style type="text/css">
			* {
				margin: 0px;
				padding: 0px;
				box-sizing: border-box;
				/*取消手机点击选择文本的css*/
				-moz-user-select: -moz-none;
				-moz-user-select: none;
				-o-user-select: none;
				-khtml-user-select: none;
				-webkit-user-select: none;
				-ms-user-select: none;
				user-select: none;
				-webkit-touch-callout：none;
				/*取消手机点击屏幕时，会出现的灰块*/
				-webkit-text-size-adjust: 100%;
				-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
			}
			
			html,
			body {
				width: 100%;
				height: 100%;
			}
			
			#container {
				width: 100%;
				height: 100%;
				display: flex;
				align-items: auto;
			}
			
			#bottom {
				width: 100%;
				height: 100px;
				background-color: white;
				display: flex;
				position: fixed;
				bottom: 0px;
				border-top: 1px solid #ccc;
				justify-content: space-around;
				align-items: center;
			}
			
			.btn {
				width: 100px;
				height: 30px;
				border: 1px solid;
				text-align: center;
				line-height: 30px;
			}
			
			#touchControl {
				position: absolute;
				top: 0px;
				width: 100%;
				height: 100%;
				padding-bottom: 100px;
			}
			
			#touchControl>img {
				width: 100%;
			}
			
			#top {
				position: relative;
				width: 100%;
				height: 100%;
				padding-bottom: 100px;
			}
			
			#testImg {
				position: absolute;
			}
		</style>
	</head>

	<body>
		<div id="container">
			<div id="top">
				<div id="touchControl">
					<img style="display: none;" src="" id="testImg"/>
				</div>
				<canvas id="canvas" width="" height=""></canvas>
				<img id="target" style="display: none;" src="img/test.jpeg" />
			</div>
			<div id="bottom">
				<div class="btn">
					上传图片
				</div>
				<div class="btn">
					生成图片
				</div>
			</div>
		</div>
		<script src="js/hammer.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/zepto.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			window.onload = function() {
				var imgsrc = ''
				document.getElementById("testImg").src=imgsrc;
			}
			
			function ImageFusion(face, target, canvas,touchControl) {
				this.target =  document.getElementById(target);
				this.face =  document.getElementById(face);
				this.canvas =  document.getElementById(canvas);
				this.ctx = this.canvas.getContext("2d");
				this.touchControl =  document.getElementById(touchControl);
				this.viewPortWidth = document.documentElement.clientWidth || document.body.clientWidth;
				this.viewPortHeight = document.documentElement.clientHeight || document.body.clientHeight;
				this.lastTop = 0; 	//图片静止的top距离
				this.lastLeft = 0;	//图片静止的left距离
				this.top = 0;			//图片实时移动的距离top
				this.left = 0;			//图片实时移动的距离left
				this.scale = 1;			//图片相对于当前图片宽度的放大比例
				this.ratio = 1;			//图片原图的比例，用于等比例缩放原图画到canvas上;
				this.width = 1;			//图片的实时宽度
				this.height =1;			//图片的实时高度
				this.lastWidth = 0; 		//图片hammer后最后一次的宽度
				this.lastHeight = 0;		//图片hammer后最后一次的高度
				this.hammerType=true;	//hammer交互形式
				this.cox =0;
				this.coy=0;
				this.sx=0;
				this.sy=0;
			}
			ImageFusion.prototype.canvasInit=function(){
				this.canvas.width = this.viewPortWidth;
				this.canvas.height = this.viewPortHeight;
			}
			ImageFusion.prototype.paramsInit = function(){
				this.ratio = this.face.height / this.face.width;
				if(this.face.width>this.viewPortWidth){
					this.lastWidth=this.viewPortWidth;
				}else{
					this.lastWidth=this.face.width;
				}
				this.lastHeight = this.lastWidth*this.ratio;
			}
			ImageFusion.prototype.drawImageToCanvas=function(){
				this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
				this.ctx.drawImage(this.face, this.left, this.top, this.lastWidth * this.scale, this.lastHeight * this.scale);
			}
			ImageFusion.prototype.hammerInit = function(){
				var self = this;
				var hammer = new Hammer.Manager(this.touchControl);
				var pinch = new Hammer.Pinch();
				var pan = new Hammer.Pan();
//				pinch.recognizeWith(pan);
				hammer.add([pinch,pan]);
				hammer.get('pan').set({
					direction: Hammer.DIRECTION_ALL,
					enable:true
				});
				hammer.get('pinch').set({
					enable: true,
					threshold:0
				});
				hammer.on("panstart pan panend pinchstart pinch pinchend", function(e) {
//					if(e.type=="panstart"){
//						self.sx = e.center.x-self.lastLeft;
//						self.sy = e.center.y-self.lastTop;
//					}
//					if(e.type == "pan") {
//						self.left = self.lastLeft + e.deltaX;
//						self.top = self.lastTop + e.deltaY;
//						
//						self.scale = e.scale;
//						self.width = self.lastWidth * self.scale;
//						self.height = self.lastHeight * self.scale;
//						console.log(e.center.x,e.center.y);
//						self.move(e.center.x,e.center.y);
////						self.drawImageToCanvas();
//					}
//					if(e.type == "panend") {
//						self.lastLeft = self.left;
//						self.lastTop = self.top;
//						
//						self.scale = e.scale;
//						self.width = self.lastWidth * self.scale;
//						self.height = self.lastHeight * self.scale;
//						self.lastWidth = self.width;
//						self.lastHeight = self.height;
////						self.drawImageToCanvas();
//					}
					if(e.type==="pinchstart"){
						self.sx = e.center.x-self.lastLeft;
						self.sy = e.center.y-self.lastTop;
					}
					if(e.type == "pinch") {
						self.left = self.lastLeft + e.deltaX;
						self.top = self.lastTop + e.deltaY;
						
//						self.scale = e.scale;
//						self.width = self.lastWidth * self.scale;
//						self.height = self.lastHeight * self.scale;
						
//						self.drawImageToCanvas();
						self.move(e.center.x,e.center.y,e.scale);
					}
					if(e.type == "pinchend") {
//						self.scale = e.scale;
//						self.lastWidth = self.width;
//						self.lastHeight = self.height;
						self.lastLeft = self.left;
						self.lastTop = self.top;
					}
					
				});
				
			}
			ImageFusion.prototype.move=function(x,y,scale){
				this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
				this.ctx.translate(x,y);
				var xishu = 1+(scale-1)*.01;
				this.ctx.scale(xishu,xishu);
				this.ctx.drawImage(this.face,-this.sx,-this.sy,this.lastWidth,this.lastHeight);
				this.ctx.translate(-x,-y);
			}
			ImageFusion.prototype.init = function() {
				var _ = this;
				if(this.face.complete){
					_.start();
				}else{
					this.face.onload=function(){
						_.start();
					}
				}
			}
			ImageFusion.prototype.start = function(){
				this.canvasInit();
				this.paramsInit();
				this.hammerInit();
//				this.drawImageToCanvas();
				
				this.move(0,0);
			}
			var fusion = new ImageFusion("target","testImg","canvas","touchControl");
			fusion.init();
		</script>
	</body>

</html>